<template>
  <el-dialog
      v-model="visible"
      :title="dialogTitle"
      width="640px"
      class="dialog"
      destroy-on-close
      @closed="handleClosed"
  >
    <el-form
        :model="formData"
        label-width="100px"
        ref="formRef"
        :rules="rules"
        class="form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="标签" prop="dicDataLabel" required>
            <el-input v-model="formData.dicDataLabel" placeholder="请输入字典项标签" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值" prop="dicDataValue" required>
            <el-input v-model="formData.dicDataValue" placeholder="请输入字典项值" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="formData.orderNum" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="enableStatus">
            <el-radio-group v-model="formData.enableStatus">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false" round>取 消</el-button>
        <el-button type="primary" @click="submitForm" round>提 交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { DicData } from "@/views/dic/DicData";

const emit = defineEmits(['submit'])

const formRef = ref<FormInstance>()

const formData = ref<DicData>({
  dicDataId: null,
  dicDataLabel: "",
  dicDataValue: "",
  dicTypeCode: "",
  orderNum: 0,
  enableStatus: "1"
})

const rules: FormRules = {
  dicDataLabel: [
    { required: true, message: '请输入标签', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ],
  dicDataValue: [
    { required: true, message: '请输入值', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ],
  orderNum: [
    { type: 'number', message: '排序必须为数字', trigger: 'blur' }
  ],
  enableStatus: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
}

const visible = ref(false)
const dialogTitle = ref('')

const openDialog = (dicTypeCode: string, rowData?: DicData) => {
  if (rowData && rowData.dicDataId) {
    dialogTitle.value = '修改字典项'
    formData.value = { ...rowData }
    formData.value.dicTypeCode = dicTypeCode
  } else {
    dialogTitle.value = '新增字典项'
    formData.value = {
      dicDataId: null,
      dicDataLabel: "",
      dicDataValue: "",
      dicTypeCode: dicTypeCode,
      orderNum: 0,
      enableStatus: "1"
    }
  }
  visible.value = true
}

const submitForm = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    emit('submit', formData.value)
    visible.value = false
  } catch (error) {
    console.log('Form validation failed')
  }
}

const handleClosed = () => {
  formRef.value?.resetFields()  // 清空表单和校验
}

defineExpose({ openDialog })
</script>

<style scoped>
.dialog {
  border-radius: 12px;
}

.form {
  padding: 10px 10px 0 0;
}

.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
</style>
